import React,{useRef,useEffect,useState,useMemo} from 'react'
/**
 * echarts的实现步骤
 * 1、页面组件中准备一个用来渲染echart图标的容器
 * 
 */
import * as echarts from 'echarts'
export default function Chart() {
 const [list,setList]=useState([])
 const options=useMemo(()=>{
    let arg={
        title:{
            text:'蜗牛学员1-6月份招生情况'
        },
        xAxis:{
            data:['1月份','2月份','3月份','4月份','5月份','6月份']
        },
        yAxis:{},
        series:[
            {
                type:'bar',
                data:list
            }
        ]
    }
    return arg
 },[list])
 const containerRef=useRef()
  useEffect(()=>{

    //这里是发送网络请求的地方
    let p=new Promise((resolve,reject)=>{
        //这里网络请求axios的代码
        setList([50,35,67,22,12,45])
        resolve(list)
    })
    p.then((list)=>{
        console.log('----',list);
        const mychart=echarts.init(containerRef.current)
        mychart.setOption(options)
    })
 
  },[])

  const styleObj={
    width:'500px',
    height:'300px',
    backgroundColor:'#f5f5f5'
  }
  return (
    <div>
        <div style={styleObj} ref={containerRef}></div>
    </div>
  )
}
